<template>
	<div>
		<t-button @click="open"><add-circle-icon slot="icon"/>发起投票</t-button>
		<t-dialog
		:visible.sync="visibleBody"
		attach="body"
		header="发起投票"
		:cancelBtn="null"
		:confirmBtn="null"
		width="600"
		>
			<div slot="body">
				<t-divider class="mt-2 mb-4"/>
				<!-- 第一步 -->
				<t-form :data="form" labelAlign="top" ref="form" :rules="rules" @reset="onReset" @submit="onSubmit" v-show="twoVote">
					<div>
						<t-form-item name="vote_text" label="投票主题">
							<t-input placeholder="请输入投票主题" clearable v-model="form.vote_text"></t-input>
						</t-form-item>
					</div>
					<div class="flex justify-between mt-4">
						<div class="w-60">
							<t-form-item name="vote_start_date" label="生效时间" class="w-full">
								<t-date-picker enable-time-picker allow-input clearable placeholder="请选择生效时间" v-model="form.vote_start_date" class="w-full"/>
							</t-form-item>
						</div>
						<div class="w-60">
							<t-form-item name="vote_end_date" label="截止时间" class="w-full">
								<t-date-picker enable-time-picker allow-input clearable placeholder="请选择截止时间" v-model="form.vote_end_date" class="w-full"/>
							</t-form-item>
						</div>
					</div>
					<div class="flex mt-8">
						<t-button class="ml-auto" variant="outline" type="reset">重置</t-button>
						<t-button class="ml-4" type="submit">下一步</t-button>
					</div>
				</t-form>
				<!-- 第二步 -->
				<div v-show="!twoVote">
					<div class="flex">
						<t-button class="ml-auto" variant="base" theme="default" @click="addOptionList"><add-circle-icon slot="icon"/>添加选项</t-button>
					</div>
					<div style="margin-top: -1.6rem;">
						<div v-for="(item, index) in vote_option" :key="index" class="mb-8">
							<p>选项内容<span class="text-red-500 ml-2">*</span></p>
							<div class="flex items-center mt-2">
								<div class="w-60">
									<t-input placeholder="请输入选项内容" v-model="item.vote_option_text"/>
								</div>
								<delete-icon class="ml-4 cursor-pointer hover:text-blue-500" @click="deleteOption(index)"></delete-icon>
							</div>
						</div>
					</div>
					<p class="text-gray-400">注意：</p>
					<p class="text-gray-400">投票一经发布无法修改，请仔细核查后再点击“发布按钮”</p>
					<div class="flex mt-8">
						<t-button class="ml-auto" variant="outline" @click="colseOption">取消</t-button>
						<t-button class="ml-4" @click="addOption">立即发布</t-button>
					</div>
				</div>
			</div>
		</t-dialog>
	</div>
</template>

<script>
	import { AddCircleIcon, DeleteIcon } from 'tdesign-icons-vue'
	import dayjs from 'dayjs'
	import { getUserId } from '@/unit/auth'
	
	export default {
		name: 'addVote',
		components: {
			AddCircleIcon,
			DeleteIcon
		},
		data(){
			return {
				visibleBody: false,
				form: {
					vote_creator_date: '',
					vote_creator_id: getUserId(),
					vote_text: '',
					vote_start_date: '',
					vote_end_date: ''
				},
				twoVote: true,
				rules: {
					vote_text: [{required: true, message: '投票标题必填', type: 'error'}],
					vote_start_date: [{required: true, message: '生效时间必填', type: 'error'}],
					vote_end_date: [{required: true, message: '截止时间必填', type: 'error'}]
				},
				vote_option: [
					{ vote_option_text: '', vote_log_id: '' },
					{ vote_option_text: '', vote_log_id: '' }
				]
			}
		},
		watch: {
			// 如果弹窗关闭则重置表单
			visibleBody(newValue){
				if(!newValue){
					this.onReset()
					this.vote_option = [
						{ vote_option_text: '', vote_log_id: '' },
						{ vote_option_text: '', vote_log_id: '' }
					]
					this.twoVote = true
				}
			}
		},
		methods: {
			// 关闭弹窗
			colseOption(){
				this.visibleBody = false
			},
			// 添加选项并发布
			addOption(){
				for(let i = 0 ; i < this.vote_option.length ; i++){
					if(this.vote_option[i].vote_option_text === ''){
						this.$message.warning('投票选项必填')
						return
					}
				}
				this.$store.dispatch('suggestion/addOption', this.vote_option).then(res => {
					if(res.status == 0){
						this.$message.success(res.message)
						this.visibleBody = false
						this.$bus.emit('getVote')
					} else {
						this.$message.error(res.message)
					}
				})
			},
			// 删除选项
			deleteOption(index){
				for(let i = 0 ; i < this.vote_option.length ; i++){
					if(index == i){
						if(this.vote_option.length <= 2){
							this.$message.warning('投票选项不能少于2个')
							return
						}
						this.vote_option.splice(i, 1)
					}
				}
			},
			// 添加选项
			addOptionList(){
				this.vote_option.push({
					vote_option_text: '',
					vote_log_id: this.vote_option[0].vote_log_id
				})
			},
			// 提交第一步
			onSubmit({ validateResult, firstError }){
				if (validateResult === true) {
					this.$store.dispatch('suggestion/addVote', this.form).then(res => {
						if(res.status === 0){
							this.twoVote = false
							this.vote_option.forEach(item => {
								item.vote_log_id = res.data['LAST_INSERT_ID( vote_log_id )']
							})
						} else {
							this.$message.error(res.message)
						}
					})
				} else {
					this.$message.warning(firstError);
				}
			},
			// 重置表单
			onReset(){
				this.$refs.form.clearValidate()
			},
			// 打开弹窗
			open(){
				this.visibleBody = true
			}
		},
		created() {
			this.form.vote_creator_date = dayjs().format('YYYY-MM-DD')
		}
	}
</script>